import React, {useEffect} from 'react'
import '@/App.scss'
import Footer from "./components/footer/Footer"
import Header from "./components/header/Header"
import Lists from "./components/lists/Lists"
import routes from './routes/routes'
import { useRoutes } from 'react-router-dom'
import Login from './views/Login/Login'
import { RootState } from './modules/RootState'
import { useDispatch, useSelector } from 'react-redux'
import { getPlayList, getUserAccount, getUserSubcount } from './utils/api'
import OlgSongs from './views/OldSongs/OlgSongs'
import { CSSTransition } from 'react-transition-group'
import Lyric from './views/Lyric/Lyric'

const App = () =>{
  const state = useSelector((state:RootState) => state.login)
  const user = useSelector((state:RootState) => state.user)
  const musicList = useSelector((state:RootState) => state.musicList)

  const dispatch = useDispatch()

  useEffect(()=>{

    // if(Object.keys(user.userAccount).length === 0){
    //   console.log('发送了')
    // }
    dispatch(getUserAccount())
    dispatch(getUserSubcount())
    dispatch(getPlayList(user.userAccount.userId))
    
  },[])

  return(
    <div className="App">
        <Header className="Header"></Header>
        <Lists className='Lists'></Lists>
        <div className="Content">
          {useRoutes(routes)}
        </div>
        <Footer className="Footer"></Footer>
       {
         state.hidden && <Login className="Login"></Login>
       }

       <CSSTransition
          classNames="lyricHidden"
          unmountOnExit={true}
          timeout={2000}
          in={musicList.lyricHidden}
        >
          <div className='lyric'>
            <Lyric></Lyric>
          </div>
       </CSSTransition>

       <CSSTransition
          classNames="songsHide"
          unmountOnExit={true}
          timeout={2000}
          in={musicList.hiddenList}
        >
        <OlgSongs className="OldSongs"></OlgSongs>
       </CSSTransition>
    </div>
  )
}
export default React.memo(App)